<template>
    <div class="search-box">
        <div class="row_tow">
            <div class="left">
                <el-icon>
                    <Tickets />
                </el-icon>
                <span>数据列表</span>
            </div>
            <div class="right">
                <el-button type="primary" @click="addUser()">添加</el-button>
            </div>
        </div>
    </div>
    <el-table :data="list" border style="width: 100%" table-layout="auto" cell-class-name="align-c"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" />
        <el-table-column prop="id" label="编号" width="180" />
        <el-table-column prop="name" label="原因类型" width="180" />
        <el-table-column prop="sort" label="排序" />
        <el-table-column label="是否启用">
            <template #default="{ row }">
                <el-switch v-model="row.status" :active-value="1" :inactive-value="0" @change="switchStatus(row)" />
            </template>
        </el-table-column>
        <el-table-column label="添加时间" width="180">
            <template #default="{ row }">
                <p>{{ formateDate(row.createTime) }}</p>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="{ row }">
                <el-button size="small" @click="allocRoleHandle(row.id)">编辑</el-button>
                <el-button size="small" @click="editUser(row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="bottom">
        <div class="left">
            <el-cascader placeholder="批量操作" v-model="DeliveryType" :options="Delivery" />
            <el-button type="primary" style="margin-left: 10px;" @click="ConfirmTn">确定</el-button>
        </div>
        <el-config-provider :locale="zhCn">
            <div class="page">
                <el-pagination v-model:current-page="form.pageNum" v-model:page-size="form.pageSize"
                    :page-sizes="[10, 20, 50, 100]" background layout="total, sizes, prev, pager, next, jumper"
                    :total="total" @size-change="getReturnReason" @current-change="getReturnReason" />
            </div>
        </el-config-provider>
    </div>
    <returnAddEditing :isShow="isShow" @hide="closeDialog" :id="editId" />
</template>
<script setup lang='ts'>
import { Tickets } from "@element-plus/icons-vue";
import { getReturnBatchDeleteApi, getReturnDeleteApi, getReturnReasonApi, getUpdatesStatusApi } from "./api";
import { reactive, ref } from "vue";
import { ElConfigProvider, ElMessage, ElMessageBox } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import { formateDate } from "@/utils/index";
import returnAddEditing from "./components/returnAddEditing.vue"

const form = reactive({
    pageNum: 1,
    pageSize: 5
})

const list = ref<CustomReasonList[]>([])
const total = ref(0)
const DeliveryType = ref([])
const isShow = ref(false)
const editId = ref(0)
const deleteList = ref<number[]>([])
const Delivery = [
    { value: '0', label: '删除', },
]

// 列表渲染
const getReturnReason = () => {
    getReturnReasonApi(form).then(res => {
        if (res.code === 200) {
            list.value = res.data.list
            total.value = res.data.total
        }
    })
}
getReturnReason()

// 状态获取
const switchStatus = (row: CustomReasonList) => {
    getUpdatesStatusApi(row.id, row.status).then(res => {
        if (res.code === 200) {
            ElMessage.success('状态修改成功')
        }
    })
}

// 添加按钮
const addUser = () => {
    isShow.value = true
}

// 子传父触发
const closeDialog = (val: boolean) => {
    isShow.value = false
    if (val) getReturnReason()
}

// 编辑
const allocRoleHandle = (id: number) => {
    isShow.value = true
    editId.value = id
}

// 删除
const editUser = (id: number) => {
    ElMessageBox.confirm("是否要进行该删除操作?", "提示?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: 'warning',
    }).then(() => {
        getReturnDeleteApi(id).then(res => {
            if (res.code === 200) {
                ElMessage.success('删除成功')
                getReturnReason()
            }
        })
    })
}

interface User {
    createTime: string;
    id: number;
    name: string;
    sort: number;
    status: number;
}

const handleSelectionChange = (val: User[]) => {
    val.forEach(item => {
        list.value.find(sur => sur.id === item.id)
        deleteList.value.push(item.id)
    })
}

// 批量确定
const ConfirmTn = () => {
    if (DeliveryType.value[0] == 0) {
        if (deleteList.value.length == 0) {
            ElMessage.warning('请选择要操作的订单')
            return;
        }
        ElMessageBox.confirm("是否要进行批量删除操作?", "提示?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: 'warning',
        }).then(() => {
            getReturnBatchDeleteApi(deleteList.value).then(res => {
                if (res.code === 200) {
                    ElMessage.success('删除成功')
                    getReturnReason()
                }
            })
        })
    } else {
        ElMessage.warning('请选择要执行的操作!')
    }
}
</script>
<style lang="less" scoped>
:deep(.cell) {
    text-align: center;
}

:deep(.el-table__cell) {
    text-align: center;
    height: 49px;
}

.search-box {
    box-shadow: 0 0 4px 2px #ccc;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 20px;

    .row_tow {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.left {
    margin: 20px 0;
    height: 20px;
    display: flex;
    align-items: center;
    margin-left: 10px;

    span {
        margin-left: 5px;
    }
}
</style>